<template>
<div>
  <van-tabs v-model:active="status" @click="tabHandler" animated color="#DBA871">
    <van-tab title="进行中" :name=2>
      <div style="margin-bottom: 50px" >
        <div style="margin-top: 20px;margin-bottom: 50px" v-for="(order,index) in orders">
          <van-cell style="background-color: #F7F8FA;" :title="order.shopName" :value="order.status" :label="order.ctime" title-class="cell-title" @click="this.$router.push('/order')"  />
          <van-card style="margin: 0px;height: 75px" @click="orderDetail(index)"
          >
            <template #thumb>
              <div style="width:200px;float: left" >
                <div style="float: left;width: 60px;height: 60px;margin-right: 10px" v-for="img in order.orderGoods">
                  <img :src="img.imgurl" style="width: 60px;height: 60px">
                </div>
              </div>
            </template>

            <template #tags>
              <p style="font-size: 15px; position: absolute; right: 0px">
                ￥ {{order.totalPrice}}
              </p>
            </template>
            <template #num>
              <p style="position: absolute; bottom:20px; right: 0px">
                共{{order.totalNum}}件
              </p>
            </template>
          </van-card>
          <div style="background-color: #f7f8fa;width: 100%;float: right;height: 30px" >
              <van-button color="#DBA871" size="mini" style="position: absolute;right: 85px" @click="confirmOrder(index,status)">确认收货</van-button>
              <van-button color="#DBA871" size="mini" style="position: absolute;right: 15px" @click="anewOrder()">再来一单</van-button>
          </div>
        </div>
      </div>
    </van-tab>
    <van-tab title="待付款" :name=1>
      <div style="margin-bottom: 50px" >
        <div style="margin-top: 20px;margin-bottom: 50px" v-for="(order,index) in orders">
          <van-cell style="background-color: #F7F8FA;" :title="order.shopName" :value="order.status" :label="order.ctime" title-class="cell-title" @click="this.$router.push('/order')"  />
          <van-card style="margin: 0px;height: 75px" @click="orderDetail(index)"
          >
            <template #thumb>
              <div style="width:200px;float: left" >
                <div style="float: left;width: 60px;height: 60px;margin-right: 10px" v-for="img in order.orderGoods">
                  <img :src="img.imgurl" style="width: 60px;height: 60px">
                </div>

              </div>
            </template>

            <template #tags>
              <p style="font-size: 15px; position: absolute; right: 0px">
                ￥ {{order.totalPrice}}
              </p>
            </template>
            <template #num>
              <p style="position: absolute; bottom:20px; right: 0px">
                共{{order.totalNum}}件
              </p>
            </template>
          </van-card>
          <div style="background-color: #f7f8fa;width: 100%;float: right;height: 30px" >
            <van-button color="#DBA871" size="mini" style="position: absolute;right: 85px" @click="payOrder(index,status)">去支付</van-button>
            <van-button color="#DBA871" size="mini" style="position: absolute;right: 15px" @click="cancelOrder(index,status)">取消订单</van-button>
          </div>
        </div>
      </div>
    </van-tab>
    <van-tab title="已取消" :name=4>
      <div style="margin-bottom: 50px" >
        <div style="margin-top: 20px;margin-bottom: 50px" v-for="(order,index) in orders">
          <van-cell style="background-color: #F7F8FA;" :title="order.shopName" :value="order.status" :label="order.ctime" title-class="cell-title" @click="this.$router.push('/order')"  />
          <van-card style="margin: 0px;height: 75px" @click="orderDetail(index)"
          >
            <template #thumb>
              <div style="width:200px;float: left" >
                <div style="float: left;width: 60px;height: 60px;margin-right: 10px" v-for="img in order.orderGoods">
                  <img :src="img.imgurl" style="width: 60px;height: 60px">
                </div>
              </div>
            </template>

            <template #tags>
              <p style="font-size: 15px; position: absolute; right: 0px">
                ￥ {{order.totalPrice}}
              </p>
            </template>
            <template #num>
              <p style="position: absolute; bottom:20px; right: 0px">
                共{{order.totalNum}}件
              </p>
            </template>
          </van-card>
          <div style="background-color: #f7f8fa;width: 100%;float: right;height: 30px" >
            <van-button color="#DBA871" size="mini" style="position: absolute;right: 15px" @click="this.$router.push('/grocery')">再来一单</van-button>
          </div>
        </div>
      </div>
    </van-tab>
    <van-tab title="已完成" :name=3>
      <div style="margin-bottom: 50px" >
        <div style="margin-top: 20px;margin-bottom: 50px" v-for="(order,index) in orders">
          <van-cell style="background-color: #F7F8FA;" :title="order.shopName" :value="order.status" :label="order.ctime" title-class="cell-title" @click="this.$router.push('/order')"  />
          <van-card style="margin: 0px;height: 75px" @click="orderDetail(index)"
          >
            <template #thumb>
              <div style="width:200px;float: left" >
                <div style="float: left;width: 60px;height: 60px;margin-right: 10px" v-for="img in order.orderGoods">
                  <img :src="img.imgurl" style="width: 60px;height: 60px">
                </div>
              </div>
            </template>

            <template #tags>
              <p style="font-size: 15px; position: absolute; right: 0px">
                ￥ {{order.totalPrice}}
              </p>
            </template>
            <template #num>
              <p style="position: absolute; bottom:20px; right: 0px">
                共{{order.totalNum}}件
              </p>
            </template>
          </van-card>
          <div style="background-color: #f7f8fa;width: 100%;float: right;height: 30px" >
            <van-button color="#DBA871" size="mini" style="position: absolute;right: 85px">开发票</van-button>
            <van-button color="#DBA871" size="mini" style="position: absolute;right: 15px" @click="this.$router.push('/grocery')">再来一单</van-button>
          </div>
        </div>
      </div>
    </van-tab>
  </van-tabs>
</div>
</template>

<script>
import {stringify} from "qs";
export default {
  name: "TheOrderView",
  data(){
    return{
      orders:[],
      status: 2
    }
  },
  mounted() {
    this.selectOrder();
  },
  methods:{
    selectOrder(){
      this.axios.get("/order/selectByState?flag="+this.status).then((res)=>{
        if (res.data.code == 200){
          console.log(res.data.data);
          this.orders = res.data.data;
        }
      })
    },
    updateState(param){
      this.axios.post("/order/updateState",param).then((r)=>{
        console.log("1111111");
        if (r.data.code==200){
          this.$toast("ok")
          this.selectOrder();
        }
      })
    },
    tabHandler(status){
      console.log(status)
      this.status = status;
      this.selectOrder();
    },
    orderDetail(index){
      console.log(index);
      this.$store.commit("setDetail",JSON.stringify(this.orders[index]))
      // this.$store.commit("setDetail",this.orders[index])
      this.$router.push("/orderDetail")
    },
    confirmOrder(index,status){
      status=3
      var param = {
        flag:status,
        orderNo:this.orders[index].orderNo
      }
      this.updateState(stringify(param))
    },
    cancelOrder(index,status){
      status=4
      var param = {
        flag:status,
        orderNo:this.orders[index].orderNo
      }
      this.updateState(stringify(param))
    },
    payOrder(index,status){
      status=2
      var param = {
        flag:status,
        orderNo:this.orders[index].orderNo
      }
      this.updateState(stringify(param))
    }
  }
}
</script>

<style>
.cell-title {
  color: green;
  text-align: left;
}
</style>